<template>
  <div class="embedded-html-container">
    <div class="html-title">
      <div class="zuo"></div>
      <span class="titletext">{{ title }}</span>
      <div class="you"></div>
    </div>
    <div class="html-wrapper">
      <BorderBox13>
        <!-- 全屏按钮 -->
        <div class="fullscreen-btn" @click="openFullscreen" @mousedown="() => console.log('按钮被按下')" title="全屏显示">
          <el-icon><Cpu /></el-icon>
        </div>
        <iframe
          ref="iframeRef"
          :src="props.htmlPath"
          class="embedded-iframe"
          frameborder="0"
          scrolling="no"
          @load="onIframeLoad"
        />
      </BorderBox13>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import BorderBox13 from '@/components/datav/border-box-13';

// 定义 props
const props = withDefaults(
  defineProps<{
    title: string;
    htmlPath: string;
  }>(),
  {
    title: '嵌入页面',
    htmlPath: '/src/views/jiedian(5).html'
  }
);

const iframeRef = ref<HTMLIFrameElement>();

// iframe 加载完成后的处理
const onIframeLoad = () => {
  console.log('HTML 页面加载完成');
  
  // 立即应用深色模式
  applyDarkMode();
  
  // 等待一段时间确保页面完全加载，然后再次应用样式
  setTimeout(() => {
    try {
      const iframe = iframeRef.value;
      if (iframe && iframe.contentDocument) {
        const doc = iframe.contentDocument;
        
        // 创建样式元素来隐藏不需要的部分，只显示地图区域
        const style = doc.createElement('style');
        style.id = 'embedded-layout-style';
        style.textContent = `
          /* 隐藏顶部导航栏 */
          .header {
            display: none !important;
          }
          
          /* 隐藏左侧菜单 */
          .sidebar {
            display: none !important;
          }
          
          /* 调整主容器布局，让地图占满整个区域 */
          .main-container {
            display: block !important;
            width: 100% !important;
            height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            position: relative !important;
          }
          
          /* 调整地图容器，让它占满整个区域 */
          .map-container {
            width: 100% !important;
            height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
          }
          
          /* 调整地图本身 */
          #map {
            width: 100% !important;
            height: 100% !important;
            position: relative !important;
          }
          
          /* 调整地图工具栏位置 */
          .map-toolbar {
            position: absolute !important;
            top: 20px !important;
            right: 20px !important;
            z-index: 1000 !important;
            background: rgba(0, 0, 0, 0.9) !important;
            border: 1px solid #333 !important;
            border-radius: 8px !important;
            padding: 10px !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
          }
          
          /* 确保页面没有滚动条 */
          body {
            overflow: hidden !important;
            margin: 0 !important;
            padding: 0 !important;
          }
          
          /* 调整整体布局 */
          #app {
            width: 100% !important;
            height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            display: block !important;
          }
          
          /* 隐藏任何可能出现的侧边栏或导航 */
          .sidebar, .nav, .menu, .header, .top-nav {
            display: none !important;
          }
          
          /* 确保地图区域完全可见 */
          .map-container, #map {
            min-height: 100vh !important;
            min-width: 100vw !important;
          }
        `;
        
        // 移除旧的布局样式（如果存在）
        const existingLayoutStyle = doc.getElementById('embedded-layout-style');
        if (existingLayoutStyle) {
          existingLayoutStyle.remove();
        }
        
        // 将样式添加到页面头部
        doc.head.appendChild(style);
        
        console.log('已成功隐藏顶部导航和左侧菜单，只显示地图区域');
        
        // 再次应用深色模式，确保覆盖
        setTimeout(() => {
          applyDarkMode();
        }, 500);
      }
    } catch (error) {
      console.warn('无法访问 iframe 内容，可能是跨域限制:', error);
      // 如果无法访问 iframe 内容，使用外部 CSS 方法
      applyExternalStyles();
    }
  }, 2000); // 延迟2秒确保页面完全加载
};

// 外部样式应用方法（当无法访问 iframe 内容时使用）
const applyExternalStyles = () => {
  const iframe = iframeRef.value;
  if (iframe) {
    // 通过外部 CSS 来调整 iframe 显示区域
    iframe.style.transform = 'translate(-200px, -100px)';
    iframe.style.width = 'calc(100% + 400px)';
    iframe.style.height = 'calc(100% + 200px)';
    iframe.style.clip = 'rect(100px, calc(100% - 200px), calc(100% - 100px), 200px)';
    iframe.style.position = 'absolute';
    iframe.style.top = '0';
    iframe.style.left = '0';
  }
};

// 全屏显示功能
const openFullscreen = (event: Event) => {
  event.preventDefault();
  event.stopPropagation();
  
  console.log('点击全屏按钮，准备打开页面:', props.htmlPath);
  
  try {
    // 新开页签而不是弹窗
    const fullscreenUrl = props.htmlPath;
    console.log('尝试打开URL:', fullscreenUrl);
    
    // 使用 _blank 打开新页签
    const newTab = window.open(
      fullscreenUrl,
      '_blank',
      'noopener,noreferrer'
    );
    
    if (newTab) {
      newTab.focus();
      console.log('已在新页签中打开页面:', fullscreenUrl);
    } else {
      console.warn('无法打开新页签，可能被浏览器阻止');
      // 备用方案：直接跳转
      console.log('使用备用方案：直接跳转');
      window.location.href = fullscreenUrl;
    }
  } catch (error) {
    console.error('打开新页签时出错:', error);
    // 最后的备用方案
    window.location.href = props.htmlPath;
  }
};

// 应用深色模式
const applyDarkMode = () => {
  console.log('开始应用深色模式...');
  
  // 多次尝试应用深色模式，确保成功
  const tryApplyDarkMode = (attempt = 1) => {
    try {
      const iframe = iframeRef.value;
      if (iframe && iframe.contentDocument) {
        const doc = iframe.contentDocument;
        
        // 创建深色模式样式
        const darkStyle = doc.createElement('style');
        darkStyle.id = 'embedded-dark-mode';
        darkStyle.textContent = `
          /* 深色模式样式 - 小窗版本 */
          * {
            box-sizing: border-box;
          }
          
          /* 整体页面深色背景 */
          html, body {
            background-color: #0a0a0a !important;
            color: #ffffff !important;
            margin: 0 !important;
            padding: 0 !important;
          }
          
          /* 应用容器深色背景 */
          #app {
            background-color: #0a0a0a !important;
            color: #ffffff !important;
          }
          
          /* 主容器深色主题 */
          .main-container {
            background-color: #0a0a0a !important;
            color: #ffffff !important;
          }
          
          /* 地图容器深色背景 */
          .map-container {
            background-color: #0a0a0a !important;
            color: #ffffff !important;
          }
          
          /* 地图本身深色主题 */
          #map {
            background-color: #0a0a0a !important;
          }
          
          /* 工具栏深色主题 */
          .map-toolbar {
            background: rgba(0, 0, 0, 0.9) !important;
            border: 1px solid #333 !important;
            border-radius: 8px !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
          }
          
          .map-toolbar .el-button {
            background-color: #2a2a2a !important;
            border-color: #444 !important;
            color: #fff !important;
            transition: all 0.3s ease !important;
          }
          
          .map-toolbar .el-button:hover {
            background-color: #3a3a3a !important;
            border-color: #555 !important;
            transform: translateY(-1px) !important;
          }
          
          .map-toolbar .el-button--primary {
            background-color: #1890ff !important;
            border-color: #1890ff !important;
          }
          
          .map-toolbar .el-button--primary:hover {
            background-color: #40a9ff !important;
            border-color: #40a9ff !important;
          }
          
          .map-toolbar .el-button--danger {
            background-color: #ff4d4f !important;
            border-color: #ff4d4f !important;
          }
          
          .map-toolbar .el-button--danger:hover {
            background-color: #ff7875 !important;
            border-color: #ff7875 !important;
          }
          
          /* 加载提示深色主题 */
          .map-loading {
            background: rgba(0, 0, 0, 0.9) !important;
            color: #fff !important;
            border: 1px solid #333 !important;
            border-radius: 8px !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
          }
          
          /* 隐藏不需要的元素，但保留地图工具栏 */
          .header, .sidebar, .nav, .menu, .top-nav {
            display: none !important;
          }
          
          /* 确保地图工具栏显示 */
          .map-toolbar {
            display: block !important;
            visibility: visible !important;
          }
          
          /* 确保地图占满整个区域 */
          .main-container {
            display: block !important;
            width: 100% !important;
            height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            position: relative !important;
          }
          
          .map-container {
            width: 100% !important;
            height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
          }
          
          #map {
            width: 100% !important;
            height: 100% !important;
            position: relative !important;
          }
          
          /* 深色模式下的地图标记样式 */
          .map-marker {
            filter: brightness(1.2) !important;
          }
          
          /* 深色模式下的光缆线样式 */
          .highlighted-fiber {
            stroke: #ff6b6b !important;
            stroke-width: 4px !important;
            filter: drop-shadow(0 0 8px rgba(255, 107, 107, 0.8)) !important;
          }
        `;
        
        // 移除旧的深色模式样式（如果存在）
        const existingStyle = doc.getElementById('embedded-dark-mode');
        if (existingStyle) {
          existingStyle.remove();
        }
        
        // 将深色模式样式添加到页面头部
        doc.head.appendChild(darkStyle);
        
        console.log('深色模式已成功应用 (尝试 ' + attempt + ')');
        return true;
      }
    } catch (error) {
      console.warn('应用深色模式失败 (尝试 ' + attempt + '):', error);
      return false;
    }
    return false;
  };
  
  // 立即尝试一次
  if (!tryApplyDarkMode(1)) {
    // 如果失败，延迟重试
    setTimeout(() => {
      if (!tryApplyDarkMode(2)) {
        setTimeout(() => {
          tryApplyDarkMode(3);
        }, 2000);
      }
    }, 1000);
  }
};

onMounted(() => {
  // 组件挂载后的初始化逻辑
  // 为小窗添加深色模式样式
  applyDarkMode();
});
</script>

<style scoped lang="scss">
.embedded-html-container {
  margin-bottom: 30px;

  .html-title {
    height: 60px;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    box-sizing: border-box;

    .titletext {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 6px;
      background: linear-gradient(92deg, #0072ff 0%, #00eaff 48.8525390625%, #01aaff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 10px;
    }

    .zuo,
    .you {
      background-size: 100% 100%;
      width: 29px;
      height: 20px;
      margin-top: 8px;
    }

    .zuo {
      background: url("@/assets/img/xiezuo.png") no-repeat;
    }

    .you {
      background: url("@/assets/img/xieyou.png") no-repeat;
    }
  }

  .html-wrapper {
    height: 580px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden; /* 隐藏超出部分 */

    .fullscreen-btn {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 1001;
      width: 44px;
      height: 44px;
      background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 2px solid #00eaff;
      box-shadow: 0 4px 12px rgba(0, 234, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
      pointer-events: auto; /* 确保可以点击 */
      
      .el-icon {
        color: #00eaff;
        font-size: 20px;
        pointer-events: none; /* 防止图标阻止点击 */
        filter: drop-shadow(0 0 4px rgba(0, 234, 255, 0.6));
      }
      
      &:hover {
        background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
        transform: translateY(-2px) scale(1.05);
        box-shadow: 0 6px 16px rgba(0, 234, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
        border-color: #00d4ff;
        
        .el-icon {
          color: #00d4ff;
          filter: drop-shadow(0 0 6px rgba(0, 234, 255, 0.8));
        }
      }
      
      &:active {
        transform: translateY(0) scale(0.98);
        background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
        box-shadow: 0 2px 8px rgba(0, 234, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
      }
      
      /* 确保按钮在最顶层 */
      &:before {
        content: '';
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        background: linear-gradient(135deg, #00eaff, #00d4ff);
        border-radius: 10px;
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      
      &:hover:before {
        opacity: 0.3;
      }
    }

    .embedded-iframe {
      width: 100%;
      height: 100%;
      border: none;
      border-radius: 8px;
      /* 备用方案：通过 CSS 裁剪显示区域 */
      transform: translate(-200px, -100px);
      width: calc(100% + 400px);
      height: calc(100% + 200px);
      clip: rect(100px, calc(100% - 200px), calc(100% - 100px), 200px);
    }
  }
}
</style>
